import { Select } from 'antd';
import { channelAPI } from 'api/channel';
import React, { useState, useEffect } from 'react';
const { Option } = Select;

//文档说明
/* 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

提供受控属性 value 或其它与 valuePropName 的值同名的属性。

提供 onChange 事件或 trigger 的值同名的事件。 */

//表单自定义组件 需要传值 value 和 onChange
export default function Channel(props) {
  //1,声明频道列表channelList
  const [channelList, setChannelList] = useState([]);
  const channelFn = async () => {
    const res = await channelAPI();
    // console.log(25, res);
    setChannelList(res.data.channels);
  };

  //2,钩子请求 数据
  useEffect(() => {
    channelFn();
  }, []);

  return (
    <Select style={{ width: 200 }} placeholder="请选择频道" {...props}>
      {channelList.map((item) => {
        return (
          <Option key={item.id} value={item.id}>
            {item.name}
          </Option>
        );
      })}
    </Select>
  );
}
